<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>模板语法2-属性绑定</h2>
    <!-- 标签中间的内容要使用变量，需要用双大括号 -->
    <!-- 标签的属性要使用变量，那么需要在属性的前面加上 v-bind指令 -->
    <!-- v-bind里面也可以使用表达式 -->
    <!-- v-bind: 可以简写成 : -->
    <div v-bind:class="className"></div>
    <!-- <img v-bind:src="imgUrl" alt=""> -->
    <img :src="imgUrl" alt="">

    <br>

    <!-- 当一个属性的值是一个布尔值，当这个布尔值是false的时候，vue会直接移除这个属性 -->
    <input type="text" :disabled="disabled">
    <button @click="disabled = !disabled">btn</button>

    <p>count: {{ doubleCount(3) }}</p>

    <!-- 图片懒加载 -->
    <!-- 标签的属性也可以使用变量,用中括号 -->
    <img :[attr]="imgUrl" alt="">
  </div>

  <script src="../Vue.js"></script>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          className: "box",
          imgUrl: "https://avatars.githubusercontent.com/u/156269?v=4&s=120",
          disabled: true,
          attr: "src2"
        }
      },
      methods: {
        doubleCount(n) {
          return 2 * n;
        }
      }

    }).mount("#app");
  </script>
</body>
</html>